<template>
  <div>
    <div class="app-container documentation-container">
      <a class="document-btn" target="_blank" href="https://www.lanqiao.cn/courses/1380">AnsibleUI 教程</a>
      <a class="document-btn" target="_blank" href="https://www.lanqiao.cn/courses/3261">SaltStack 教程</a>
      <a class="document-btn" target="_blank" href="https://gitee.com/lwr_dgas">Gitee 仓库</a>
      <a class="document-btn" target="_blank" href="https://miniprogram.ansibleui.cn/">个人博客</a>
      <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
      <br>
      <!-- <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a> -->
    </div>
    <div class="app-container documentation-container">
    <div class="demo-image" style="text-align: center;">
        <el-image style="width: 150px; height: 150px" alt="微信小程序" src="https://miniprogram.ansibleui.cn/usr/uploads/2021/04/3355546812.jpg" fit="cover"></el-image>
        <br><span class="demonstration">微信小程序</span><br>
    </div>
    </div>

  </div>


</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'
import Axios from 'axios'

export default {
  name: 'Documentation',
  components: { DropdownMenu },
  data() {
    return {
      url: 'https://miniprogram.ansibleui.cn/api/posts',
      listQuery: {
        page: 1,
        pageSize: 20,
        apisec: 'DSfewfEWc2e'
      },
      articleList: [
        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
      ]
    }
  },
  mounted(){
      Axios.get(this.url, {params: this.listQuery}).then(resp => {
        this.articleList=resp.data.data
        for(var i=0; i<this.articleList.length; i++){
          this.articleList[i].href = this.articleList[i].permalink
        }
      })
    
  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .document-btn {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    background: gray;
    color: white;
    height: 60px;
    padding: 0 16px;
    margin: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
</style>
